<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日志管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<!-- 查询条件开始-->
<form class="layui-form" action="">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日志类型</label>
                    <div class="layui-input-inline">
                        <select name="type" id="search_type">
                            <option value="">请选择日志类型</option>
                            <option value="登录操作">登录操作</option>
                            <option value="添加操作">添加操作</option>
                            <option value="查询操作">查询操作</option>
                            <option value="删除操作">删除操作</option>
                            <option value="修改操作">修改操作</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">登录名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="loginname" id="loginname" class="layui-input searchVal"
                               placeholder="请输入登录名称"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" id="startTime" readonly class="layui-input searchVal"
                               placeholder="开始时间"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endTime" readonly class="layui-input searchVal"
                               placeholder="结束时间"/>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;">
                    <button type="button" lay-submit lay-filter="doSearch" class="layui-btn"><span
                            class="layui-icon layui-icon-search"></span>查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-warm"><span
                            class="layui-icon layui-icon-refresh-1"></span>重置
                    </button>
                </div>
            </div>
        </form>
    </blockquote>
</form>
<!-- 查询条件结束-->


<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="logTable" lay-filter="logTable">

    </table>
    <!-- 表格工具栏 -->
    <div id="logToolBar" style="display: none;">
        <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger">
            <span class="layui-icon layui-icon-delete"></span>批量删除
        </button>


    </div>
</div>
<!-- 数据表格结束 -->

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'table', 'layer', 'laydate'], function () {

        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate
        //初始化渲染日期时间组件
        laydate.render({
            elem: "#startTime",//绑定表单元素中的id属性值
            type: "datetime"//空间类型
        })
        laydate.render({
            elem: "#endTime",//绑定表单元素中的id属性值
            type: "datetime"//空间类型
        })
        //渲染数据表格
        var tableIns = table.render({
            elem: '#logTable',//绑定table表格id
            url: '/sys/log/loglist',
            toolbar: "#logToolBar",
            height: '500',
            page: true,
            cols: [
                [
                    {type: "checkbox", fixed: "left"},
                    {field: "id", title: "ID", align: 'center'},
                    {field: "loginname", title: "登录名称", align: 'center'},
                    {field: "type", title: "日志类型", align: 'center'},
                    {field: "content", title: "日志内容", align: 'center'},
                    {field: "loginip", title: "登录地址", align: 'center'},
                    {field: "createtime", title: "登录时间", align: 'center'},
                ]
            ],
            done: function (res, curr, count) {
                //判断当前页码是否大于1
                if (curr > 1 && res.data.length == 0) {
                    //当前页码减1
                    var pageValue=curr-1
                    tableIns.reload({
                        page:{curr:pageValue}//修改页码
                    })
                }
            }

        });
        //绑定模糊查询监听事件
        //提交submit()是layui的form表单提交事件
        //doSearch是lay-filter的属性值
        form.on("submit(doSearch)", function (data) {

            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        })
        //监听数据表格的头部工具栏事件
        //步骤1: 头部工具栏按钮设置lay-event 属性(lay-event="batchDelete")
        //步骤2: 绑定表格的监听事件
        table.on('toolbar(logTable)', function (obj) {
            switch (obj.event) {
                //监听批量删除得按钮
                case "batchDelete":
                    batchDelete();
                    break;
            }
        });

        function batchDelete() {
            //获取选中行
            var checkStatus = table.checkStatus('logTable');//lay-filter的属性值
            console.log(checkStatus);
            //获取选中的数量
            var length = checkStatus.data.length
            if (length > 0) {
                //提示是否删除
                layer.confirm("确定要删除这" + length + "条数据吗?", {icon: 3, title: "提示"}, function (index) {
                    //获取选中行的id
                    var checkData = checkStatus.data;//获取每一行的数据
                    var idArr = []
                    for (var i = 0; i < length; i++) {
                        idArr.push(checkData[i].id);
                    }
                    var ids = idArr.join(",");
                    //发送删除的请求
                    $.post(
                        "/sys/log/delete",
                        {ids: ids},
                        function (result) {
                            //判断是否删除成功
                            if (result.success) {
                                //删除成功后刷新数据
                                tableIns.reload();
                            }
                            layer.msg(result.message);
                        },
                        "json"
                    );
                    //关闭提示框
                    layer.close(index)
                })
            } else {
                layer.alert("请选择要删除的数据！", {icon: 0})
            }
        }
    });

</script>

</body>
</html>